<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../0907day/css/bootstrap.css">
    <script src="../0907day/js/jquery.min.js"></script>
    <script src="../0907day/js/popper.min.js"></script>
    <script src="../0907day/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../0907day/css/animate.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: '微软雅黑';
        }

        #bg {
            border: 1px solid;
            background: url('./img/banenr.jpg');
            background-size: cover;
            /* 全覆盖 */
            padding: 3%;
            height: 720px;
        }

        #bg div button {
            width: 200px;
            height: 54px;
            border: 1px solid white;
        }

        #d1 {
            /* border: 1px solid red; */
            /* height: 720px; */
            display: flex;

        }

        #d1 img {
            margin-top: 18%;
            height: 540px;
            width: 540px;
        }

        #d1 div button {
            width: 200px;
            height: 52px;
            border: 1px solid black;
            background-color: white;
        }

        #d1 div .img-fluid {
            max-width: 100%;
            height: auto;
        }

        @media (max-width:768px) {
            #d1 {
                position: relative;
                height: 900px;
            }

            #t1 {
                position: absolute;
                bottom: 0;
            }

            #t2 {
                position: absolute;
                top: 0;
            }

            .ct {
                text-align: center;
            }
        }

        @media (min-width:768px) {
            .ct {
                padding-left: 5%;

            }
        }

        #footer .row {
            margin-right: 0px;
        }

        #footer .row .pl-5 {
            margin-left: 32px;
        }

        #footer .row .pl-5 #ft1 {
            color: #fff;
            font-size: 16px;
            margin-top: 50px;
            margin-bottom: 40px;
            font-weight: bolder;
        }

        #footer .row .pl-5 ul li a {
            color: #fff;
            font-size: 13px;
            font-weight: bolder;
        }

        /* 动画 */
        #bg div button:hover {
            width: 204px;
            height: 58px;
            opacity: 0.8;
            /* border: 1px solid red; */
            background-color: rgba(255, 255, 255, 0.8);
            transition: all 0.5s;
        }

        .container #d1 div div button:hover {
            width: 204px;
            height: 58px;
            transition: all 0.5s;
            opacity: 0.8;
        }
    </style>
</head>

<body>
    <div>
        <div class="navbar navbar-light bg-light navbar-expand-lg">
            <a href="../项目首页.html" class="navbar-brand">CRENTAL</a>
            <button data-toggle="collapse" data-target="#bar1" class="navbar-toggler">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="bar1" class="collapse navbar-collapse animated bounceInLeft">
                <ul class="navbar-nav">
                    <li class="nav-tiem"><a href="#lunbo" id="a1" class="nav-link">轮播</a></li>
                    <li class="nav-tiem"><a href="#deals" id="a2" class="nav-link">品牌</a></li>
                    <li class="nav-tiem"><a href="#cars" id="a3" class="nav-link">车展</a></li>
                    <li class="nav-tiem"><a href="#about" id="a4" class="nav-link">扩展</a></li>
                    <li class="nav-tiem"><a href="../摩托车.html" class="nav-link">摩托</a></li>
                    <li class="nav-tiem"><a href="./quachuo.html" class="nav-link">跨戳</a></li>
                    <li class="nav-tiem"><a href="../评测/home.html" class="nav-link">车辆评测</a></li>
                    <li class="nav-tiem"><a href="../关于介绍/index.html" class="nav-link  navbar">关于我们</a></li>
                    <li class="nav-tiem"><a href="../新闻资讯/xinwen.html" class="nav-link">新闻资讯</a></li>
                    <li class="nav-tiem"><a href="../买车页面/1.html" class="nav-link">我要买车</a></li>
                    <li class="nav-tiem"><a href="../卖车页面.html" class="nav-link">我要卖车</a></li>
                    <li class="nav-tiem"><a href="../私人订制.html" class="nav-link">私人订制</a></li>
                    <li class="nav-tiem"><a href="../联系我们/index.html" class="nav-link">联系我们</a></li>
                    <li class="nav-tiem"><a href="../3D/3D相册.html" class="nav-link">3D效果图</a></li>
                    <li class="nav-tiem"><a href="../登录注册/a.html" class="nav-link">登录/注册</a></li>
                  
    
                </ul>
            </div>
        </div>
        </div>
        <!-- 头部 -->
        <div id="bg" class="w-100">

            <div class="mt-5 ml-5" style="font-size: 36px;color: #ffffff;">现代空间艺术，现已启程</div>

            <div class="mt-2 ml-5" style="font-size: 24px;color: #ffffff;">全新奥迪 A8L Horch 全球解密</div>

            <div class="mt-4 ml-5">
                <button class="btn" style="font-size: 15px;">查看详情</button>
            </div>
        </div>
        <!-- 中部 -->
        <!-- 图1 -->
        <div class="container">
            <div id="d1" class="row">
                <div style="margin-top: 20%;" class="ct col-md-6 ">
                    <div style="font-size: 36px; font-weight:bold;">沙漠征服者 </div>
                    <div style="font-size: 36px; font-weight:bold; margin-top: -3%;">强悍原力已被唤醒</div>
                    <div style="font-size: 16px;">伟大的想法，唯有付诸实践，才能见证它真正的伟大！<br>
                        奥迪 RS Q e-tron 已在摩洛哥更严峻的条件下完成新的突破！</div>
                    <div><button class="btn mt-4">了解详情</button></div>
                </div>
                <div class="ml-auto col-md-6"><img class="i1 img-thumbnail img-fluid " src="./img/q1.jpg" alt=""></div>
            </div>
            <!-- 图2 -->
            <div id="d1" class="row">
                <div id="t1" class="mr-auto col-md-6"><img class="i2 img-thumbnail img-fluid" src="./img/q2.jpeg"
                        alt="">
                </div>
                <div id="t2" class="ct col-md-6" style="margin-top: 20%;">
                    <div style="font-size: 36px; font-weight:bold;">解锁我的自定义</div>
                    <!-- <div style="font-size: 36px; font-weight:bold; margin-top: -3%;">强悍原力已被唤醒</div> -->
                    <div style="font-size: 16px;">全新奥迪Q2L，亮眼外型，一眼瞩目，彰显你的个性一面。<br>
                        解锁多元、年轻、独特而富有感染力的设计语言，创领潮流新<br>
                        生活。
                    </div>
                    <div><button class="btn mt-4">查看详情</button></div>
                </div>
            </div>
            <!-- 图3-->
            <div id="d1" class="row">
                <div style="margin-top: 20%;" class="ct col-md-6">
                    <div style="font-size: 36px; font-weight:bold;">百年基因 驭电如一 </div>
                    <!-- <div style="font-size: 36px; font-weight:bold; margin-top: -3%;">强悍原力已被唤醒</div> -->
                    <div style="font-size: 16px;">融合了前沿科技，同时演绎奥迪豪华格调。这将成为未来的豪<br>
                        华纯电驱动性能标杆，向未来，始终如一。</div>
                    <div><button class="btn mt-4">纯电生活体验</button></div>
                </div>
                <div class="ml-auto col-md-6"><img class="i3 img-thumbnail img-fluid " src="./img/q3.jpg" alt=""></div>
            </div>
            <!-- 图4 -->
            <div id="d1" class="row">
                <div id="t1" class="mr-auto col-md-6"><img class="i4 img-thumbnail img-fluid " src="./img/q4.jpeg"
                        alt="">
                </div>
                <div id="t2" style="margin-top: 20%;" class="ct col-md-6">
                    <div style="font-size: 36px; font-weight:bold;">个性化定制</div>
                    <!-- <div style="font-size: 36px; font-weight:bold; margin-top: -3%;">强悍原力已被唤醒</div> -->
                    <div style="font-size: 16px;">这一次，由自己， 摒弃传统，注入未来的模样。<br>
                        相由心生，倾听心灵的律动，迎接灵魂的诞生。
                    </div>
                    <div><button class="btn mt-4">即刻定制</button></div>
                </div>
            </div>
            <!-- 图5 -->
            <div id="d1" class="row">
                <div style="margin-top: 20%;" class="ct col-md-6">
                    <div style="font-size: 36px; font-weight:bold;">预约试驾</div>
                    <!-- <div style="font-size: 36px; font-weight:bold; margin-top: -3%;">强悍原力已被唤醒</div> -->
                    <div style="font-size: 16px;">联系离您最近的经销商。</div>
                    <div><button class="btn mt-4">即刻预约</button></div>
                </div>
                <div class="ml-auto col-md-6"><img class="i5 img-thumbnail img-fluid " src="./img/q5.jpg" alt=""></div>
            </div>

        </div>
        <!-- 底部 -->
        <div id="footer" style="margin-top: 7%; padding-bottom: 5%; background-color: black;">

            <div class="row" style="display: flex;">
                <div class="pl-5" style="margin-left: 70px;">
                    <div id="ft1">奥迪车型</div>
                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="" class="nav-link">查看所有奥迪车型</a></li>
                    </ul>
                </div>

                <div class="pl-5 ">
                    <div id="ft1">奥迪纯电</div>
                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="" class="nav-link">充电服务</a></li>
                        <li class="nav-item"><a href="" class="nav-link">新能源售后服务承诺</a></li>
                    </ul>
                </div>

                <div class="pl-5">
                    <div id="ft1">购车工具</div>

                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="" class="nav-link">老用户购车</a></li>
                        <li class="nav-item"><a href="" class="nav-link">大用户及留学生</a></li>
                        <li class="nav-item"><a href="" class="nav-link">贷款服务</a></li>
                        <li class="nav-item"><a href="" class="nav-link">保险服务</a></li>
                        <li class="nav-item"><a href="" class="nav-link">延长保修服务</a></li>
                        <li class="nav-item"><a href="" class="nav-link">南方车型</a></li>
                        <li class="nav-item"><a href="" class="nav-link">在线购车</a></li>
                    </ul>
                </div>

                <div class="pl-5 ">
                    <div id="ft1">售后服务</div>
                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="" class="nav-link">奥迪卓·悦服务</a></li>
                        <li class="nav-item"><a href="" class="nav-link">维修保养服务</a></li>
                        <li class="nav-item"><a href="" class="nav-link">三包保障服务</a></li>
                        <li class="nav-item"><a href="" class="nav-link">24小时道路救援</a></li>
                        <li class="nav-item"><a href="" class="nav-link">原厂备件附件</a></li>
                        <li class="nav-item"><a href="" class="nav-link">奥迪车主俱乐部</a></li>
                    </ul>

                </div>

                <div class="pl-5">
                    <div id="ft1">创新科技</div>
                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="" class="nav-link">奥迪概念车</a></li>
                        <li class="nav-item"><a href="" class="nav-link">奥迪设计</a></li>
                        <li class="nav-item"><a href="" class="nav-link">奥迪quattro</a></li>
                        <li class="nav-item"><a href="" class="nav-link">奥迪驾驶系统</a></li>
                        <li class="nav-item"><a href="" class="nav-link">奥迪connect互联科技</a></li>
                    </ul>

                </div>
                <div class="pl-5">
                    <div id="ft1">奥迪品牌</div>
                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="" class="nav-link">奥迪新闻</a></li>
                        <li class="nav-item"><a href="" class="nav-link">奥迪体验活动</a></li>
                        <li class="nav-item"><a href="" class="nav-link">移动出行</a></li>
                        <li class="nav-item"><a href="" class="nav-link">关于奥迪</a></li>
                        <li class="nav-item"><a href="" class="nav-link">创见未来</a></li>
                        <li class="nav-item"><a href="" class="nav-link">责任与贡献</a></li>
                        <li class="nav-item"><a href="" class="nav-link">合作伙伴招募</a></li>
                    </ul>

                </div>
                <div class="pl-5">
                    <div id="ft1">奥迪个性化定制</div>
                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="" class="nav-link"></a></li>

                    </ul>

                </div>
                <div class="pl-5" style="margin-left: 70px;">
                    <div id="ft1">官方认证二手车</div>
                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="" class="nav-link">销售服务</a></li>
                        <li class="nav-item"><a href="" class="nav-link">置换收购服务</a></li>
                        <li class="nav-item"><a href="" class="nav-link">官方认证活动</a></li>
                    </ul>
                </div>

                <div class="pl-5">
                    <div id="ft1">RS</div>
                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="" class="nav-link"></a></li>

                    </ul>
                </div>

                <div class="pl-5">
                    <div id="ft1">联系奥迪</div>
                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="" class="nav-link">联系我们</a></li>
                        <li class="nav-item"><a href="" class="nav-link">预约试驾</a></li>
                        <li class="nav-item"><a href="" class="nav-link">联系经销商</a></li>
                        <li class="nav-item"><a href="" class="nav-link">索取产品手册</a></li>
                        <li class="nav-item"><a href="" class="nav-link">订阅奥迪新闻传递</a></li>
                        <li class="nav-item"><a href="" class="nav-link">咨询/投诉/建议</a></li>
                    </ul>

                </div>
                <div class="pl-5">
                    <div id="ft1">相关网站链接</div>
                    <ul class="navbar-nav">
                        <li class="nav-item"><a href="" class="nav-link">奥迪全球</a></li>
                        <li class="nav-item"><a href="" class="nav-link">一汽-大众</a></li>
                        <li class="nav-item"><a href="" class="nav-link">奥迪官方微博</a></li>
                        <li class="nav-item"><a href="" class="nav-link">奥迪官方微信</a></li>
                        <li class="nav-item"><a href="" class="nav-link">奥迪官方抖音</a></li>
                        <li class="nav-item"><a href="" class="nav-link">奥迪官方bilibili</a></li>
                    </ul>
                </div>




            </div>

            <div style=" margin-left: 100px; color: #fff;padding-top: 50px;">
                隐私条款 | 法律声明 | 吉ICP备09000793号 | 吉公网安备 22010602000241号
            </div>
        </div>

    </div>
    <script>
        window.onscroll = function () {
            var top = document.documentElement.scrollTop;
            // console.log(top);
            //动画     
            if (top >= 450) {
                $('.i1').addClass('animated slideInRight')

            }
            if (top >= 1100) {
                $('.i2').addClass('animated slideInLeft')
            }
            if (top >= 1800) {
                $('.i3').addClass('animated slideInRight')

            }
            if (top >= 2400) {
                $('.i4').addClass('animated slideInLeft')
            }
            if (top >= 2900) {
                $('.i5').addClass('animated slideInRight')

            }
        }
    </script>

</body>

</html>